<template>
  <div>
    <component ref="viewFence" :is="currentViewComponent" />
  </div>
</template>

<script>
import { wgs84togcj02, gcj02towgs84, out_of_china } from 'gps-convert'
import GView from '@/components/map/fence/google/ViewFence'
import TView from '@/components/map/fence/tencent/ViewFence'


function convertCoordinates(format) {
  if(format){
    var parts = format.slice(1, -1).split(",");
    var latitude = parseFloat(parts[0]);
    var longitude = parseFloat(parts[1]);
    return {
        latitude: latitude,
        longitude: longitude
    };
  }
  return null;
}

function convertCirCle(format) {
    var parts = format.slice(1, -1).split(",");
    var latitude = parseFloat(parts[0]);
    var longitude = parseFloat(parts[1]);
    var radius = parseFloat(parts[2]);
    return {
        latitude: latitude,
        longitude: longitude,
        radius: radius
    };
}

function convertPolygon(format) {
  var points = format.slice(1, -1).split(");(");
  return points.map((item) => {
      let parts = item.split(",");
      let latitude = parseFloat(parts[0]);
      let longitude = parseFloat(parts[1]);
      return {
          latitude: latitude,
          longitude: longitude
      };
  });
}

export default {
  name: 'View',
  components: {
    GView,
    TView
  },
  data() {
    return {
      // 假设这里根据浏览器语言来设置初始值
      language: navigator.language || navigator.userLanguage, // 获取浏览器语言
      currentView: 'GView' // 默认组件，可以根据实际情况修改
    }
  },
  computed: {
    // 根据当前语言选择组件
    currentViewComponent() {
      // 这里只是一个简单的示例，你可能需要根据实际情况调整语言判断逻辑
      if (this.language.startsWith('zh')) {
        // 如果是中文，则使用 TView
        this.currentView = 'TView';
      } else {
        // 其他情况使用 GView
        this.currentView = 'GView';
      }
      console.log('currentView:', this.currentView);
      return this.currentView;
    }
  },
  // 如果需要在组件创建后执行某些操作，可以使用 mounted 钩子函数
  methods: {
    show(shapeType, center, area){
      let point = convertCoordinates(center);
      //处理地图中心点
      if(out_of_china([point.longitude, point.latitude])){ //国内wgs84坐标转换为gcj02坐标
        const point = wgs84togcj02([center.longitude, center.latitude]);
        x = point[1].toFixed(6);
        y = point[0].toFixed(6);
        point = {"latitude": x, "longitude": y};
      }
      //处理围栏区域
      let fenceArea;
      if (shapeType === 'circle') {
        const { latitude, longitude, radius } = convertCirCle(area);
        let x = latitude;
        let y = longitude;
        if(out_of_china([point.longitude, point.latitude])){ //国内wgs84坐标转换为gcj02坐标
          const point = wgs84togcj02([longitude, latitude]);
          x = point[1].toFixed(6);
          y = point[0].toFixed(6);
        }
        fenceArea = {
          latitude: x,
          longitude: y,
          radius: radius
        };
      }
      if (shapeType === 'polygon') {
        let paths = convertPolygon(area);
        if(out_of_china([paths[0].longitude, paths[0].latitude])){ //国内wgs84坐标转换为gcj02坐标
          paths = paths.map((item) => {
            const { latitude, longitude } = item;
            const point = wgs84togcj02([longitude, latitude]);
            x = point[1].toFixed(6);
            y = point[0].toFixed(6);
            return {
              latitude: x,
              longitude: y
            }
          });
        }
        fenceArea = paths;
      }
      this.$refs.viewFence.show(shapeType, point, fenceArea);
    }
  }
}
</script>

<style scoped>
</style>